<template>
	<svg class="svg-icon">
		<use :href="iconClassName" ></use>
	</svg>
</template>

<script setup>
	import { defineProps,computed } from 'vue'
	const props = defineProps({
	  name: String,
	  width: {
		type: String,
		default: '14px'
	  },
	  height: {
	  	type: String,
	  	default: '14px'
	  },
	  color: {
		type: String,
		default: 'red'
	  },
	});
	const iconClassName = computed(() => {
	  return `#${props.name}`
	})
</script>

<style>
	.svg-icon {
	  /* v-bind 是 Vue3 才支持的功能，可以将 CSS 的值与 js 的值绑定 */
	  width: v-bind(props.width);
	  height: v-bind(props.height);
	  position: relative;
	  fill: v-bind(props.color);
	  overflow: hidden;
	}
</style>